import { Button } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { HoleAlignTableData } from '.';
import { Icon, ParameterObjectType } from '@amcax/base';
import { useNumberWithUnit } from '@app-base/common/hooks/unit';

const Distance = ({ value }: { value: number }) => {
  const { parseNumberWithUnit } = useNumberWithUnit();
  return parseNumberWithUnit(value, ParameterObjectType.Length, 3);
};

export const getHoleAlignCheckColumns: (
  setTableRowIgnored: (key: string, ignored: boolean) => void,
) => ColumnsType<HoleAlignTableData> = (setTableRowIgnored) => [
  {
    title: '孔组',
    dataIndex: 'holes',
    key: 'holes',
    width: 120,
    render: (_, record, index) => (
      <div className='whitespace-nowrap flex gap-x-2'>
        <Icon
          name='commands/product/interference-check'
          className='text-lg'
          style={
            record.isIgnored
              ? {
                  filter: 'grayscale(100%)',
                  opacity: 0.7,
                }
              : null
          }
        />
        孔组{index + 1}
      </div>
    ),
  },
  {
    title: '零件1',
    width: 100,
    render(_, record) {
      const title = record.part1?.title;
      return record.index1 == null ? title : `${title}的实体${record.index1}`;
    },
  },
  {
    title: '零件2',
    width: 100,
    render(_, record) {
      const title = record.part2?.title;
      return record.index2 == null ? title : `${title}的实体${record.index2}`;
    },
  },
  {
    title: '计算结果',
    dataIndex: 'distance',
    key: 'distance',
    width: 120,
    render(val: number) {
      return <Distance value={val} />;
    },
  },
  {
    title: '',
    key: 'operation',
    dataIndex: 'isIgnored',
    width: 120,
    render(ignored: boolean, row) {
      return (
        <Button
          className='min-w-[90px]'
          onClick={() => setTableRowIgnored(row.key, !ignored)}
        >
          {ignored ? '取消忽略' : '忽略'}
        </Button>
      );
    },
  },
];
